<template>
  <div class="container">
    <div style="height: 90px; padding: 25px 25px 0px">
      <!-- <el-input
        placeholder="请输入内容"
        v-model="input"
        class="input-with-select"
        style=" width: 50%;"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
        
      </el-input> -->
      <el-button
        style="width: 100%"
        slot="append"
        type="primary"
        @click="toReservation"
        >去 预 约</el-button
      >
    </div>
    <el-row style="padding: 0px 15px 200px">
      <el-col :span="24" v-for="(item, index) in listData" :key="index">
        <el-card
          :body-style="{ padding: '0px' }"
          style="margin: 10px"
          @click.native="selectReservation(item)"
        >
          <!-- <img
            src="https://img.yaokaihui.com/86195160/366d530d3faa59cf77d8e498fea8faf5.jpg"
            class="image"
          /> -->
          <div>
            <el-alert
              :title="item.预订状态"
              :type="item.type"
              :closable="false"
            >
            </el-alert>
            <span style="padding: 5px 10px; font-size: 18px !important">{{
              item.会议室名称
            }}</span>
            <p style="padding: 15px 10px 5px; font-size: 15px !important">
              {{ item.预订日期 + ' ' + item.开始时间 + '至' + item.结束时间 }}
            </p>
            <!-- <p style="padding: 5px 10px 15px; font-size: 15px !important">
              {{ item.会议室名称 }}</p> -->
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      VID: '',
      ClientName: '天津港一公司办公楼',
      inputName: '',
      originalData: null,
      listData: null,
    }
  },
  mounted () {
    if ('ClientName' in this.$route.query) {
      this.ClientName = this.$route.query.ClientName;
    }
    this.VID = this.$route.query.VID;
    this.getMeetingOrderInfoOfMy();
  },
  beforeRouteEnter (to, from, next) {
    next((vm) => {
      vm.getMeetingOrderInfoOfMy()
    })
  },
  methods: {
    async getMeetingOrderInfoOfMy () {
      var url = 'ConferenceRoom/GetMeetingOrderInfoOfMy?Date=&Type=-2&VID=' + this.VID
      const { data } = await this.$Http.get(url)
      data.forEach(element => {
        switch (element.预订状态) {
          case '预订中':
            element.type = 'warning'
            break;
          case '预订成功':
            element.type = 'success'
            break;
          default:
            element.type = 'error'
            break;
        }
      });
      this.originalData = data
      this.listData = data
    },
    toReservation () {
      this.$route.params.VID = this.VID;
      this.$route.params.ClientName = this.ClientName;
      this.$router.push({ path: '/ConferenceRoomList' })
    },
    selectReservation (item) {
      this.$route.params.ID = item.ID;
      this.$route.params.VID = this.VID;
      this.$router.push({ path: '/MyReservationDetail' })
    },
  }
}
</script>

<style lang="scss" scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  font-size: 25px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 20%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}
.context {
  font-size: 18px !important;
  line-height: 20px !important;
}
</style>
